<template>
  <div>
    <el-page-header @back="goBack"></el-page-header>
    <div class="transReset">
      <div class="content">
        <div class="left">
          <div class="title">转账到微信钱包</div>
          <div class="hint">
            企业可以向有实名认证的微信用户进行零钱转账，如需向多个用户进行转账，
            请使用企业批量付款功能。
          </div>
          <div class="card">
            <img src="@/assets/imgs/checkAccount/trans_reset.png" alt="" />
          </div>
        </div>
        <div class="right">
          <el-form
            :model="form"
            ref="form"
            :rules="ruleForm"
            label-position="top"
          >
            <el-form-item label="转出渠道">
              <el-select
                v-model="form.payformChannel"
                placeholder="请选择"
                filterable
                class="width512"
                @change="setName"
                disabled
              >
                <el-option
                  v-for="(item, index) of channelList"
                  :key="index"
                  :label="CHANNEL_TYPE[item.channel]"
                  :value="item.channel"
                ></el-option>
              </el-select>
            </el-form-item>

            <div class="channel-desc">
              <div class="channel-img">
                <img
                  :src="
                    require(`@/assets/imgs/checkAccount/${
                      channelImg[cInfo.channel]
                    }.png`)
                  "
                />
              </div>
              <div class="channel-count">
                <div class="tit">可用金额</div>
                <div class="count">-</div>
                <!-- <div class="count">¥{{ cInfo.avlBalance }}</div> -->
              </div>
            </div>

            <el-form-item label="转账金额" prop="fmtTransAmt" class="diyUi">
              <el-input
                title=""
                @keydown.native="inputKeyDown"
                v-model="form.fmtTransAmt"
                placeholder=""
                class="width512"
                type="number"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
            <!-- <div class="mount-desc">
              转账金额不可超过
              <span style="color: #03bfc6">¥{{ cInfo.avlBalance }}</span>
            </div> -->

            <!-- <el-form-item label="微信用户/商户ID" prop="memberId">
              <el-input
                v-model="form.memberId"
                placeholder="请输入"
                class="width512"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="收款账户(openID)" prop="inMemberId">
              <el-input
                v-model="form.inMemberId"
                placeholder="请输入个人Open ID"
                class="input_"
                maxlength="64"
              ></el-input>
            </el-form-item>

            <el-form-item label="收款人姓名" prop="inAccountName">
              <el-input
                v-model="form.inAccountName"
                placeholder="请输入收款人姓名"
                class="input_"
                maxlength="15"
              ></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                placeholder="备注"
                class="input_"
                maxlength="30"
              ></el-input>
            </el-form-item>

            <el-form-item label="" style="margin-top: 50px">
              <el-button class="width120" @click="goBack">返回</el-button>
              <el-button
                type="primary"
                class="width120"
                @click="goCode('SMS_BUSINESS_SETTLE_BALANCE_PAY')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <codeDialogVue
      codeId="10"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import { isAmount } from "@/utils/validate";
import { getToken, getUserInfo } from "@/utils/public";
import base64 from "@/utils/code";
import codeDialogVue from "@/components/codeDialog.vue";
import { mapMutations } from "vuex";

export default {
  name: "transferWechat",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeType: "",
      channelList: [], //渠道列表
      codeDialog: false,
      cInfo: {
        channel: "ada",
        avlBalance: 0,
      },
      channelImg: {
        wechat: "c3",
        ali: "c2",
        ada: "c1",
        // yse: "银盛",
        // fuiou: "富友",
      },
      form: {},
      ruleForm: {
        inMemberId: [
          { required: true, message: "请输入个人Open ID", trigger: "change" },
        ],
        inAccountName: [
          { required: true, message: "请输入收款人姓名", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请输入转账说明", trigger: "change" },
        ],
        fmtTransAmt: [
          { required: true, message: "请输入转账金额", trigger: "change" },
          { validator: this.checkAmount, trigger: "change" },
        ],
        memberId: [
          { required: true, message: "请输入商户ID", trigger: "change" },
        ],
        payAmt: [
          {
            required: true,
            message: "请输入充值金额",
            trigger: "change",
          },
          {
            validator: this.checkAmount,
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    const item = JSON.parse(base64.decode(this.$route.query.item));
    let channel = item.channel;
    //console.log(channel);

    this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
      if (res.code === "0000") {
        //console.log(res.data.channelInfo);
        this.channelList = res.data.channelInfo;
        this.getInfo(channel);
      }
    });
  },
  methods: {
    getUserInfo,
    ...mapMutations(["changeLive"]),
    inputKeyDown(event) {
      const { key } = event;
      const filterValue = ["e", "+", "-"];
      if (filterValue.includes(key)) {
        event.returnValue = false;
        return false;
      }
      return true;
    },
    codeStateFn(val) {
      if (val) {
        this.submit();
      }
    },
    submit() {
      this.$http
        .post(`/api/merchant/settleBalancePay/add`, {
          ...this.form,
          payType: this.$route.query.payType ? this.$route.query.payType : "",
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("转账成功！");
            this.testCancel();
            // this.$router.push("/account/wallet");
          }
        });
    },
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/account/wallet");
    },
    goCode(val) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (getUserInfo().checkFlag) {
            this.submit();
          } else {
            this.codeType = val;
            this.codeDialog = true;
          }
        }
      });
    },
    goBack() {
      this.$backTo(`/account/enterprisePayment?item=${this.$route.query.item}`);
    },
    checkAmount(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入转账金额"));
      } else if (!isAmount(value)) {
        callback(new Error("金额必须为整数或者保留两位小数"));
      } else if (Number(value) > 99999999.99) {
        callback(new Error("超出最大输入限制"));
      } else if (value < 0.3) {
        callback(new Error("金额不能小于0.3"));
      } else {
        callback();
      }
    },
    setBanlance(c) {
      const cInfo = this.channelList.find((item) => item.channel == c);
      this.cInfo = cInfo;
    },

    getToken,
    setName(val) {
      //console.log(val);
      this.setBanlance(val);
    },
    getInfo(channel) {
      this.form.payformChannel = channel;
      this.setBanlance(channel);
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let param = {
            ...this.form,
            goodsDesc: "充值",
          };
          //console.log(param);

          this.$http
            .post("/api/merchant/balanceCharge/add", param)
            .then((res) => {
              if (res.code === "0000") {
                window.open(res.data.cashierUrl);
                setTimeout(() => {
                  this.$router.push("/qiye/orderCenter");
                }, 3000);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.transReset {
  padding: 57px 95px 125px 95px;
  background: #fff;
  min-width: 1200px;
  min-height: 825px;
  border-radius: 20px 0px 0px 0px;

  .width512 {
    width: 440px;
  }
  .content {
    display: flex;
    .left {
      margin-right: 195px;
      .title {
        margin-top: 15px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
        margin-bottom: 20px;
      }

      .hint {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .card {
        margin-top: 160px;
      }
    }
    .right {
      .mount-desc {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #869daa;
        margin-bottom: 40px;
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }

      .channel-desc {
        background: #f6f9fb;
        border-radius: 10px;
        padding: 18px 37px;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;

        .channel-img {
          height: 40px;
          padding-right: 45px;
          border-right: 1px solid #e9e9e9;
        }
        .channel-count {
          height: 40px;
          padding-left: 45px;
          .tit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
          }
          .count {
            font-size: 20px;
            font-family: GothamSSm-Medium, GothamSSm;
            font-weight: 500;
            color: #4f595f;
            // margin-top: 3px;
          }
        }
      }
      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      :deep(.el-form-item__content) {
        line-height: 20px;
      }
      :deep(.el-upload .el-upload-dragger) {
        width: 440px;
        height: 100px;
      }
      :deep(.el-icon-upload) {
        margin-top: 20px;
        line-height: 20px;
      }
      :deep(.el-upload__text2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
  :deep(.el-input__inner) {
    line-height: 1px !important;
  }
  :deep(
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button
    ) {
    -webkit-appearance: none;
    margin: 0;
  }
}
</style>
